<template>
	<view class="m30">
		<view class="flex-jus">
			<view class="flex">
				<view v-for="(item,index) in navList" :key="index" class="c999 f28 flex mr30 nav-item"
					:class="{'active pore':parameter.petType == item.value}" @click="navClick(item)">
					<image v-if="item.icon" class="mr10" :src="'../static/pet/' + item.icon + '.png'" mode=""></image>
					<text class="c343 bold">{{item.name}}</text>
				</view>
			</view>
			<view class="flex">
				<view class="textC" @click="nologinJump('/subpage/pet/archives')">
					<view class="">
						<image src="../static/pet/list.png" mode="" style="width: 28rpx;height: 28rpx;"></image>
					</view>
					<view class="f24 c343">档案</view>
				</view>
				<view class="textC ml30" @click="nologinJump('/pages/contacts/index')">
					<view class="">
						<image src="../static/pet/msg.png" mode="" style="width: 28rpx;height: 28rpx;"></image>
					</view>
					<view class="f24 c343">消息</view>
				</view>
			</view>
		</view>
		<u-gap height="15"></u-gap>
		<view class="pore">
			<view class="bgFff flex-jus filter-top" :class="showFilter?'showF':'radius50'"
				@click="showFilter = !showFilter">
				<view class="flex">
					<text class="f26 c343">配对条件</text>
					<view class="f24 c999 ml30 flex" v-if="parameterText.length > 0">
						<view class="ml10">{{parameterText.join(' / ')}}</view>
					</view>
					<view class="f24 c999 ml30" v-else>地区 / 性别 / 年龄 / 状态 </view>
				</view>
				<view>
					<u-icon :name="showFilter?'arrow-up':'arrow-down'" size="16"></u-icon>
				</view>
			</view>
			<view class="filter-box box_shadow" v-show="showFilter">
				<view class="p30">
					<view class="" v-for="(item,index) in type_list" :key="index">
						<view class="c343 bold f26">{{item.name}}</view>
						<view class="flex mt20 flex-wrap">
							<view class="mr20 f24 mb20" v-for="(item2,index2) in item.data" :key="index2">
								<u-button shape="circle" :color="parameter[item.key] == item2.dictCode?'#ff9494':'#fff'"
									@click="sel_parameter(item,item2)"
									:customStyle="{'color':parameter[item.key] == item2.dictCode?'#fff':'#34314F','border':'1px solid #eee','height':'60rpx','fontSize':'24rpx'}">
									{{item2.dictLabel}}
								</u-button>
							</view>
						</view>
					</view>
					<view class="" v-if="parameter.petType == 1 || parameter.petType == 2">
						<view class="c343 bold f26">宠物品种</view>
						<view class="flex mt20 flex-wrap">
							<view class="mr20 f24 mb20"
								v-for="(item,index) in parameter.petType == 1?petCatVarietys:petDogVarietys"
								:key="item.dictCode">
								<u-button shape="circle" :color="parameter.petVariety == item.dictCode?'#ff9494':'#fff'"
									@click="()=>sel_petVarietys(item)"
									:customStyle="{'color':parameter.petVariety == item.dictCode?'#fff':'#34314F','border':'1px solid #eee','height':'60rpx','fontSize':'24rpx'}">
									{{item.dictLabel}}
								</u-button>
							</view>
						</view>
					</view>
					<u-gap height="20"></u-gap>
					<view class="flex">
						<view class="mr20 flex1">
							<u-button shape="circle" color="#f7f7f7" @click="reset_parameter"
								:customStyle="{'color':'#34314F','height':'70rpx','fontSize':'24rpx'}">
								重置
							</u-button>
						</view>
						<view class="flex1">
							<u-button shape="circle" color="#FFDE6D" @click="get_list_by_parameter"
								:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'70rpx','fontSize':'24rpx'}">
								确认
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="15"></u-gap>
		<view class="bgFff radius50 box_shadow" v-if="detail.id">
			<view>
				<swiper class="swiper" circular indicator-dots autoplay :interval="3000"
					indicator-active-color="#FFDE6D">
					<swiper-item v-for="(item,index) in detail.imgs" :key="index">
						<!-- <image :id="'wrap' + index" :src="api_host + item" mode="widthFix" class="width100"></image> -->
						<u--image :showLoading="true" :src="api_host + item" width="100%" height="800rpx"
							mode="widthFix"></u--image>
					</swiper-item>
				</swiper>
				<!-- <ban-swiper :list="detail.imgs"></ban-swiper> -->
			</view>
			<view class="p30">
				<view class="flex-jus">
					<view class="flex">
						<image v-show="detail.petSex == 1" src="../static/pet/boy.png" mode=""
							style="width: 28rpx;height: 28rpx;vertical-align: middle;"></image>
						<image v-show="detail.petSex == 2" src="../static/pet/girl.png" mode=""
							style="width: 28rpx;height: 28rpx;vertical-align: middle;"></image>
						<text class="f28 bold c343 ml10 mr30">{{detail.petName}}</text>
						<text class="f24 c999">{{detail.petAddrLabel}}</text>
					</view>
					<view class="mr20">
						<view>
							<u-icon :name="detail.isCollection == 1?'star-fill':'star'" size="16"
								:color="detail.isCollection == 1?'#ff9494':'#34314F'" :label="detail.collectionVolume"
								labelPos="right" labelSize="12"
								:labelColor="detail.isCollection == 1?'#ff9494':'#34314F'"></u-icon>
						</view>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex">
					<view class="mr20">
						<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5"
							:text="detail.petVarietyLabel" borderColor="#FFE5E5"></u-tag>
					</view>
					<view class="mr20">
						<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5" :text="detail.petAgeLabel"
							borderColor="#FFE5E5"></u-tag>
					</view>
					<view class="mr20">
						<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5"
							:text="detail.petStatusLabel" borderColor="#FFE5E5"></u-tag>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="bgF7 radiusBox p20 f26 c343">
					“{{detail.declaration}}”
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<view class="flex">
						<view @click="starlikeBtn(1,2,detail.id)">
							<image v-if="detail.isCollection == 1" src="../static/pet/like.png" mode=""
								style="width: 70rpx;height: 70rpx;vertical-align: middle;"></image>
							<image v-if="detail.isCollection == 0" src="../static/pet/nolike.png" mode=""
								style="width: 70rpx;height: 70rpx;vertical-align: middle;"></image>
						</view>
						<view class="flex1 flex-au ml30 mr30">
							<u-button class="box_shadow" shape="circle" @click="getPethome('2')"
								:customStyle="{'padding':'0 70rpx','height':'70rpx'}">换一个</u-button>
						</view>
						<view
							@click="checkHaspet">
							<image src="../static/pet/chat.png" mode=""
								style="width: 70rpx;height: 70rpx;vertical-align: middle;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show_action" title="创建宠物档案" content="录入宠物档案，为你的爱宠开启寻找情缘之旅">
			<view class="" slot="confirmButton">
				<view class="">
					<view class="flex-au">
						<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}"
							shape="circle" @click="toAddpet(1)">开始创建</u-button>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au close-modal">
					<u-icon name="close-circle-fill" color="#000" size="26" @click="close_tip(1)"></u-icon>
				</view>
			</view>
		</u-modal>
		<u-modal :show="show_action2" title="开启对话" content="录入宠物档案可以更好的和对方铲屎官交流呢~">
			<view class="" slot="confirmButton">
				<view class="flex-jus">
					<view class="flex1">
						<view class="mr20">
							<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="toChat">直接对话</u-button>
						</view>
					</view>
					<view class="flex1">
						<view class="ml20">
							<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}"
								shape="circle" @click="toAddpet(2)">录入档案</u-button>
						</view>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au close-modal">
					<u-icon name="close-circle-fill" color="#000" size="26" @click="close_tip(2)"></u-icon>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getTypes,
		getPethome,
		getmyPet
	} from '@/common/api_pet.js'
	import banSwiper from '@/components/banSwiper/index.vue'
	export default {
		name: '',
		components: {
			banSwiper
		},
		data() {
			return {
				show_action:false,
				show_action2:false,
				showFilter: false,
				parameterText: [],
				parameter: {
					petType: '',
					petAddr: '',
					petAge: '',
					petStatus: '',
					petVariety: '',
					petSex: ''
				},
				navList: [{
						name: '全部',
						value: ''
					},
					{
						name: '喵喵',
						icon: 'cat',
						value: '1'
					},
					{
						name: '汪汪',
						icon: 'dog',
						value: '2'
					}
				],
				petList:[],
				detail: {},
				type_list: [],
				petDogVarietys: [],
				petCatVarietys: []
			}
		},
		onLoad(option) {
			this.getmyPet()
			this.getPethome()
			this.getTypes()
		},
		methods: {
			async getmyPet() { //
				const res = await getmyPet()
				if (res.code == 200) {
					let { data } = res
					this.petList = data
					if(!uni.getStorageSync('hasKonwpet')){
						if(this.petList.length == 0){
							uni.setStorageSync('hasKonwpet',true)
							this.show_action = true
						}
					}
					
				}
			},
			toAddpet(type){
				if(type == 1){
					this.show_action = false
				}else{
					this.show_action2 = false
				}
				uni.navigateTo({
					url:'/subpage/pet/archives?form=index'
				})
			},
			checkHaspet(){
				if(!uni.getStorageSync('hasKonwpet2')){
					uni.setStorageSync('hasKonwpet2',true)
					if(this.petList.length == 0){
						this.show_action2 = true
					}
				}else{
					this.nologinJump('/pages/contacts/privateChat?to='+this.detail.userId+'&pet_id='+this.detail.id)
				}
			},
			toChat(){
				uni.setStorageSync('hasKonwpet2',true)
				this.show_action2 = false
				this.nologinJump('/pages/contacts/privateChat?to='+this.detail.userId+'&pet_id='+this.detail.id)
			},
			close_tip(type){
				if(type == 1){
					this.show_action = false
				}else{
					this.show_action2 = false
				}
			},
			navClick(item) {
				this.parameter.petType = item.value
				this.parameter.petVariety = ''
				this.getPethome()
			},
			sel_parameter(item, item2) {
				if (this.parameter[item.key] && this.parameter[item.key] == item2.dictCode) {
					this.parameter[item.key] = ''
				} else {
					this.parameter[item.key] = item2.dictCode
				}
				console.log(this.parameterText);
			},
			sel_petVarietys(item) {
				if(this.parameter.petVariety && this.parameter.petVariety == item.dictCode){
					this.parameter.petVariety = ''
				}else{
					this.parameter.petVariety = item.dictCode
				}
			},
			get_list_by_parameter() {
				this.showFilter = false
				this.parameterText = []
				Object.keys(this.parameter).forEach(key =>{
					if(this.parameter[key]){
						this.type_list.forEach(item =>{
							if(key == item.key){
								item.data.forEach(item2 =>{
									if(item2.dictCode == this.parameter[key]){
										this.parameterText.push(item2.dictLabel)
									}
								})
							}
						})
					}
				})
				if(this.parameter.petVariety){
					this.petDogVarietys.forEach(item =>{
						if(item.dictCode == this.parameter.petVariety){
							this.parameterText.push(item.dictLabel)
						}
					})
					this.petCatVarietys.forEach(item =>{
						if(item.dictCode == this.parameter.petVariety){
							this.parameterText.push(item.dictLabel)
						}
					})
				}
				this.getPethome()
			},
			reset_parameter() {
				this.parameter = {
					petType: '',
					petAddr: '',
					petAge: '',
					petStatus: '',
					petVariety: '',
					petSex: ''
				}
				this.parameterText = []
				this.showFilter = false
				this.getPethome()
			},
			async getTypes() { //筛选
				const res = await getTypes()
				if (res.code == 200) {
					const {
						employAddress,
						petAges,
						petStatus,
						petCatVarietys,
						petDogVarietys
					} = res.data
					this.petCatVarietys = petCatVarietys
					this.petDogVarietys = petDogVarietys
					this.type_list = [{
							name: '地区',
							data: employAddress,
							key: 'petAddr'
						},
						{
							name: '宠物年龄',
							data: petAges,
							key: 'petAge'
						},
						{
							name: '宠物状态',
							data: petStatus,
							key: 'petStatus'
						},
						{
							name: '宠物性别',
							data: [{
									dictLabel: '男孩子',
									dictCode: '1'
								},
								{
									dictLabel: '女孩子',
									dictCode: '2'
								}
							],
							key: 'petSex'
						}
					]
				}
			},
			async getPethome(type) { //随机宠物
				// if(type == 2){
				// 	this.parameter = {
				// 		petType: '',
				// 		petAddr: '',
				// 		petAge: '',
				// 		petStatus: '',
				// 		petVariety: '',
				// 		petSex: ''
				// 	}
				// }
				this.detail = {}
				const res = await getPethome(this.parameter)
				if (res.code == 200) {
					let {
						data
					} = res
					this.detail = data
					this.detail.imgs = this.detail.images ? this.detail.images.split(',') : []
					if (!data.id) {
						uni.showToast({
							title: '暂无宠物数据',
							icon: 'none'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFEEEE;
	}

	.swiper {
		height: 600rpx;
	}

	.nav-item {
		image {
			width: 32rpx;
			height: 32rpx
		}
	}

	.active {
		color: #34314F;
		font-weight: bold;
		z-index: 10;
		font-size: 32rpx !important;

		image {
			width: 40rpx;
			height: 40rpx
		}
	}

	.active::after {
		position: absolute;
		content: '';
		left: -20rpx;
		top: 0;
		height: 100%;
		width: 70rpx;
		border-radius: 30rpx;
		background-color: #FFEEEE;
		background-image: linear-gradient(to right, #FFB8B8, #FFEEEE);
		z-index: -1;
	}

	.showF {
		border-radius: 30rpx 30rpx 0 0;
	}

	.filter-top {
		height: 80rpx;
		padding: 0 30rpx;
	}

	.filter-box {
		position: absolute;
		top: 80rpx;
		left: 0;
		width: 100%;
		max-height: 80vh;
		overflow-y: scroll;
		border-radius: 0 0 50rpx 50rpx;
		background-color: #fff;
	}
</style>